<!--
 * @Descripttion: 文件说明
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-07-29 10:40:40
 * @LastEditors: GW
 * @LastEditTime: 2021-11-27 17:14:11
-->
<template>
  <div class="form-group" >
    <label :for="id" :class="labelClass" :style="finalLabelStype">
      <span v-if="required" class="required ">*</span>{{ title }}：</label>
    <div :class="rightClass" :style="rightStyle">
      <form-pop :content="error"/>
      <a-input
      :type="inputType"
      :id="id"
      :name="name"
      @change="onChange" 
      autocomplete="off"
      :title="value"
      :value="value"
      class="form-control "
      style="width:100%;"
      :style="inputStyle"
      :size="size"
      :read-only="readonly"
      :disabled="disabled"
      :placeholder="placeholder"
      :maxLength="maxLength"
      @blur="blurEvent"
    />
    </div> 
  </div>
</template>

<script>
import formAttr from "@/mixins/form/form-attr";

const defaultLabelStype =
  "font-weight: normal;justify-content: flex-end;padding-left: 5px;text-align: right;width:110px;";
export default {
  name: "FormInput",
  mixins: [formAttr],
  props: {
    inputType: {
      type: String,
      default: "text"
    },
    maxLength: {
      type: Number,
      default: 250
    },
    blurEvent:{
      type: Function,
      default:()=>{}
    }
  },
  mounted(){
    console.log("error",this.error)
  },
  computed: {
    finalLabelStype: function() {
      return this.labelStyle || defaultLabelStype;
    },
  },
  methods: {
    onChange(event) {
      console.log("input_change",event.target.value)
      this.$emit("input", event.target.value);
    }
  }
};
</script>
<style lang="less" scoped>
  .required{
    margin-right: 4px;
    color: #f5222d;
    line-height: 1rem;
  }
</style>
